<template>
	<div class="main-tab">
		<ul class="main-tab-list">
			<li>
				<router-link tag="a" :to="{name: 'Category', query: { levelOne: '', levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: '' }}" class="main-tab-fake">全部商品</router-link>
			</li>			
			<li v-for="(tab, index) in tabArr" @click="tabChange(index)">
				<router-link tag="a" :to="{name: tab.path}">
					<img :src="tab.imgPath" :style="{width: tab.width}" />
				</router-link>
				<div class="main-tab-list-active" :class="{'display-none': tab.isShow }"></div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				tabArr: [
					{	
						name: 'home',
						path: 'Home',
						isShow: false,
						imgPath: '/static/img/shouye@2x.png',
						width: '38px'
					}/*,
					{
						name: 'active',
						path: 'Active',
						isShow: true,
						imgPath: '/static/img/huodong@2x.png',
						width: '38px'
					},
					{
						name: 'marketing',
						path: 'Marketing',
						isShow: true,
						imgPath: '/static/img/neirongyingxiao@2x.png',
						width: '76px'
					},
					{
						name: 'promotions',
						path: 'Promotions',
						isShow: true,
						imgPath: '/static/img/cuxiaohuodong@2x.png',
						width: '76px'
					},
					{
					 name: 'special',
						path: 'Special',
						isShow: true,
						imgPath: '/static/img/xinqite@2x.png',
						width: '56px'
					}*/
				]
			}
		},
		watch: {
          // 如果路由有变化，会再次执行该方法
        	"$route": "clearTab"
        },
        created(){
        	this.clearTab();
        },
		methods: {
			tabChange(index){
				var id = index;
				var arr = this.tabArr;
				for(var i in arr){
					if(i == id){
						this.tabArr[i].isShow = false;
					}else{
						this.tabArr[i].isShow = true;
					}
				}
			},
			clearTab(){
				var str = this.$route.path.substring(7);
				var arr = this.tabArr;
				for(var i in arr){
					if(str == arr[i].name){
						this.tabArr[i].isShow = false;
					}else{
						this.tabArr[i].isShow = true;
					}
				}
				if(str == 'marketingdetail'){
					this.tabArr[2].isShow = false;
				}else if(str == 'promotionsdetail'){
					this.tabArr[3].isShow = false;
				}		
			}
		}
	}
</script>